<template>
	<view class="goods">
		<!-- 分类列表 -->
		<view class="dropdown">
			<u-dropdown ref="uDropdown" @open="open" @close="close">
				<u-dropdown-item v-model="zonghe" title="综合" :options="options1" disabled>
				</u-dropdown-item>
				<u-dropdown-item v-model="price" title="价格" :options="options2"
					@change="change({keyword:keyword,order:price,sort: 'price'})"></u-dropdown-item>
				<u-dropdown-item v-model="fenlei" title="分类" :options="options3"
					@change="change({keyword:keyword,categoryId:fenlei})"></u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list" v-for="item in goodlist" :key="item.id">
			<image class="goods-image" :src="item.list_pic_url
" mode="widthFix"></image>
			<view class="goods-toptxt">{{item.name}}</view>
			<view class="goods-btxt">￥{{item.retail_price.toFixed(2)}}元</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "Goods",
		props: ['goodlist', 'keyword'],
		data() {
			return {
				// 分类选项数据
				filterCategory: [],
				// 分类选项id
				fenlei: "",
				// 综合
				zonghe: 1,
				// 价格
				price: "desc",
				// 分类
				fenlei: 0,
				// 列表数据
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					}
				],
				options2: [{
						label: '价格由高到低',
						value: "desc",
					},
					{
						label: '价格由低到高',
						value: "asc",
					},
				],
				options3: [],
			};
		},
		methods: {
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change({
				keyword = "",
				categoryId = 0,
				order = "desc",
				sort = "price"
			} = {}) {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
				// console.log(val);
				// this.fenleiId = val
				// console.log('categoryId:', categoryId, 'order:', order, sort);

				this.$request({
					url: "/goods/list",
					data: {
						keyword,
						categoryId: this.fenlei,
						order: this.price,
						sort
					},
					successCb: res => {
						// console.log(res.data);
						this.$emit("changegoods", res.data)
					}
				})
			}
		},
		created() {
			this.$request({
				url: "/goods/list",
				successCb: res => {
					// console.log(res);
					this.filterCategory = res.filterCategory
					this.options3 = this.filterCategory.map((item) => {
						return {
							label: item.name,
							value: item.id
						}
					})
					// console.log(this.options3);
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.goods {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;

		.dropdown {
			width: 750rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx #ddd;
		}

		.goods-list {
			text-align: center;
			width: 345rpx;
			margin: 0 15rpx;
			padding-bottom: 30rpx;
			font-family: '黑体';

			.goods-image {
				width: 100%;
				vertical-align: middle;
			}

			.goods-toptxt {
				font-size: 28rpx;
				color: #333;
			}

			.goods-btxt {
				color: #8b0000;
			}
		}
	}
</style>
